<template>
    <div class="voteResult">
        <div class="voteDetailTitle">
            {{voteData.theme}}
        </div>
        <!--单选-->
        <div class="voteDetailWrap" >
            <div class="voteDetailLi" v-for="(item,index) in voteData.vote_option" :key="item.id" >
                <div class="voteDetailList" >
                    <p class="flex">
                        <span class="flex-1" ><span>{{item.option}}</span> </span>
                        <span class="num">{{item.optionmembers_count}} 票</span>
                    </p>
                    <p class="progress">
                        <span class="progress-finished" :style="{width:`${item.optionmembers_count/voteData.vote_result.voted_count*100+'%'}`}"></span>
                    </p>
                </div>
                <div class="voteMenber flex"  v-if="item.optionmembers_count>0&&mode==1" :class="{'hide':item.isHide==1}">
                    <div class="voteMenberList align-center"
                         v-for="(item2,index2) in item.optionmembers"
                         :key="index2"
                    >
                        <img :src=item2.photo alt="" >
                        <span >{{item2.name}}</span>
                    </div>
                </div>
                <div class="Abbreviation" v-if="item.isHide==1&&mode==1">
                    <img :src="item2.photo" alt="" v-for="(item2,index2) in item.optionmembers"
                         :key="index2" v-show="index2<=2">
                    <span class="abbreviationImg" @click.stop="showMore(index)"></span>
                </div>
                <p class="hideData" v-if="item.optionmembers_count>5&&mode==1" :class="{'hide':item.isHide==1}" @click.stop="hideMore(index)">
                    <span class="iconfont iconshangjiantou"></span>
                </p>
            </div>
        </div>
        <p class="resultTips">
            <span class="iconfont iconkaoshi_dati_time"></span>已投票：<b>{{voted_count.voted_count}}人 </b>未投票：<b>{{voted_count.unvote_count}}人</b>
        </p>
    </div>
</template>

<script>
    import Toast from 'muse-ui-toast';
    export  default ({
        data(){
            return {
                vote:0,
                voteData:{},
                voted_count:{},
                mode:0,

            }
        },
        methods:{
            getData(id){
                this.$http.get('app/Vote/detail',{
                    id:id,
                    member_id:JSON.parse(Cookies.get('user_71ydj')).id
                }).then((res)=>{
                    console.log(res)
                    if(res.code==200){
                        this.voteData=res.data;
                        this.voted_count =(this.voteData.vote_result);
                        for(var i in this.voteData.vote_option){
                            this.voteData.vote_option[i].isHide=0
                        }
                    }
                })
            },
            hideMore(index){
                var oldData  =this.voteData.vote_option[index];
                oldData.isHide =1;
                this.$set(this.voteData.vote_option,index,oldData)
            },
            showMore(index){
                var oldData  =this.voteData.vote_option[index];
                oldData.isHide =0;
                this.$set(this.voteData.vote_option,index,oldData)
            }
        },
        mounted(){
            this.$progress.done();
            this.getData(this.$route.query.id)
            this.mode =this.$route.query.mode;
        }

    })
</script>
<style lang="scss" scoped>
    .voteResult{
        min-height: 100vh;
        background: #f3f4fa;
        .voteDetailTitle{
            background: white;
            padding: 18px 0;
            padding-left: 18px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            font-size:18px;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(51,51,51,1);
            margin-bottom: 28px;
        }
        .voteDetailWrap{
            padding: 0 16px;
            width: 100%;
            .voteDetailList{
                display: inline-block;
                width: 100%;
                padding: 0px 12px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                background:rgba(255,255,255,1);
                box-shadow:0px 6px 32px 0px rgba(230,230,230,0.2);
                border-radius:4px;
                margin-bottom: 16px;
                font-size:16px;
                font-family:PingFang SC;
                font-weight:500;
                color:rgba(51,51,51,1);
                p{
                    span.flex-1{
                        position: relative;
                        &.clickIndex{
                            span{
                                position: relative;
                                &:after{
                                    position: absolute;
                                    content: '';
                                    right: -16px;
                                    top: 50%;
                                    width: 6px;
                                    height:10px;
                                    border-style: solid;
                                    border-color: #F35A4C;
                                    border-width: 0 2px 2px 0;
                                    -webkit-transform: rotateZ(45deg);
                                    transform: rotateZ(45deg);
                                    margin-top: 2px;
                                }
                            }

                        }
                    }
                    span.num{
                        font-size: 14px;
                        width: 70px;
                        text-align: center;
                        margin-top: 5px;
                    }
                    &.flex{
                        padding-top: 16px;
                        margin-bottom: 18px;
                    }

                }
                .progress{
                    position: relative;
                    width: 100%;
                    height:3px;
                    background:#f3f4fa;
                    border-radius:6px;
                    margin-bottom: 15px;
                    .progress-finished{
                        vertical-align: top;
                        display: inline-block;
                        height: 100%;
                        background:rgba(236,83,69,1);
                    }
                }

            }
        }
        .voteBtn{
            display:block;
            margin: 0 auto;
            background:rgba(236,83,69,1);
            width: 60px;
            padding: 6px 0;
            text-align: center;
            font-size: 14px;
            color: white;
            border-radius: 6px;
        }

    }
    .resultTips{
        font-size: 14px;
        color:rgba(194,194,194,1);
        position: relative;
        padding: 0 16px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding-top: 10px;
        span{
            margin-right: 10px;
        }
        &:after{
            position: absolute;
            content: '';
            left: 16px;
            right: 16px;
            top:0 ;
            height: 1px;
            background: rgba(228,229,239,1);
        }
        b{
            font-weight: normal;
            color: #333333;
        }
    }
    .voteMenber{
        margin-bottom: 20px;
        flex-wrap:wrap;
        .voteMenberList{
            width: 25%;
            height: 30px;
            /*text-align: center;*/
            margin-bottom: 14px;
            img{
                display: inline-block;
                width: 28px;
                height: 28px;
                vertical-align: top;
                margin-right: 6px;
                border: 2px solid white;
                border-radius: 50%;
                -webkit-border-radius: 50%;
            }
            span{
                display: inline-block;
                vertical-align: top;
                font-size: 12px;
                color: #999999;
                line-height: 30px;
            }
        }
        &.hide{
            display: none !important;
        }
    }
    .flex{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .align-center{
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .flex-1{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        min-width: 0;
        height: 100%;
    }
    .Abbreviation{
        margin-bottom: 29px;
        margin-top: 17px;
        height: 28px;
        vertical-align: top;
        img{
            display: inline-block;
            width: 28px;
            height: 28px;
            vertical-align: top;
            margin-left: -10px;
            border: 2px solid white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            &:first-child{
                margin-left: 0;
                z-index: 5;
            }
            &:nth-child(2){
                z-index: 4;
            }
            &:nth-child(3){
                z-index: 3;
            }
            &:nth-child(4){
                z-index: 2;
            }
            &:nth-child(5){
                z-index: 1;
            }

        }
        .abbreviationImg{
            vertical-align: top;
            display: inline-block;
            margin-top: 4px;
            width: 40px;
            height: 20px;
            background-image: url("../../../assets/img/abbreviation.png");
            background-repeat: no-repeat;
            background-position: center;
            margin-left: 18px;
            background-size: 40px 20px;
        }
    }
    .hideData{
        background: white;
        display: block;
        margin: 0 auto;
        width: 40px;
        height: 20px;
        vertical-align: top;
        margin-bottom: 40px;
        border-radius:10px;
        text-align: center;
        &.hide{
            display: none;
            transition: all .5s;
        }
        span{
            vertical-align: top;
            &:before{
                line-height: 20px;
                vertical-align: top;
                color:rgba(211,211,211,1);
            }
        }
    }
</style>

